<template>
  <div class="w-[1200px] h-[510px] bg-zinc-100 mx-auto mt-5">
    <div class="w-[600px] h-[450px] leading-[500px] text-center float-left">
      <img class="w-96 h-96 inline-block" :src="`http://127.0.0.1:8081${productInfoData.productImage}`" alt="">
    </div>
    <div class="w-[500px] h-[450px] float-left mt-14">
      <div class="text-3xl font-bold mt-5">{{ productInfoData.productName }}</div>
      <div class="mt-5 text-lg">{{ productInfoData.productProfile }}</div>
      <div class="mt-5 text-zinc-500 line-through">￥{{ productInfoData.listPrice }}</div>
      <div class="text-3xl font-bold text-red mt-2">￥{{ productInfoData.sellPrice }}</div>
      <div class="mt-5">
        <el-radio-group v-model="radio2">
          <el-radio-button v-for="(item, index) in productSpecData" :label="item.spec" :key="item"
            @click="selectSpec(item.id)" />
        </el-radio-group>
      </div>
      <!-- <div class="num">
          <button class="add" @click="this.num--" :disabled="this.num == 1">-</button>
          <span>{{ num }}</span>
          <button class="cut" @click="this.num++">+</button>
        </div> -->
      <div class="mt-6">
        <!-- <button class="buy">立即购买</button> -->
        <button
          class="mx-2 border-2 border-solid border-rose-400 w-28 h-11 text-center rounded-3xl hover:bg-rose-400 hover:text-white"
          @click="addCart">添加购物车</button>
        <el-button type="danger" :icon="Star" circle title="收藏" :disabled="this.isCollect === true" @click="addCollect" />
      </div>
    </div>
  </div>
  <div class="w-[1200px] mx-auto mt-3">
    <h2 class="text-3xl font-bold text-rose-500 tracking-widest">商品评论</h2>
    <ul class="my-4 border-b-2 border-solid border-rose-200" v-for="item in commentInfoData">
      <li class="text-lg mt-2">{{ item.userName }} <span class="text-zinc-400 text-sm ml-4">{{ item.commentTime }}</span>
      </li>
      <li class="m-2 mb-4">{{ item.commentContent }}</li>
    </ul>
  </div>
</template>

<script  setup>
import { compile, ref } from 'vue'
import { Star } from '@element-plus/icons-vue'
const radio2 = ref( ' ' )
</script>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      productId: window.localStorage.getItem( "productId" ),
      productInfoData: {
        productImage: '',
        productProfile: '',
        productName: '',
        sellPrice: '',
        specId: 0
      },
      productSpecData: [],
      commentInfoData: [],
      isCollect: false,
      // num: 1
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      axios( {
        url: 'http://127.0.0.1:8081/api/selectProductInfoByProductId',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          productId: this.productId,
          userName: window.localStorage.getItem( "userName" ),
        }
      } ).then( res => {
        if ( res.data.success === false ) {        // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" )     // 删除卡片，跳转到登录页面
          this.$router.push( { path: '/login' } )
        } else {
          this.productInfoData = res.data.data.productInfo
          this.productSpecData = res.data.data.productSpecList
          this.commentInfoData = res.data.data.commentInfoList
          this.isCollect = res.data.data.isCollect
        }
      } )
    },
    // 添加购物车
    addCart() {
      if ( this.specId == '' || this.specId === undefined || this.specId == null ) {
        this.$message.error( '请选择商品规格' )
      } else {
        axios( {
          url: 'http://127.0.0.1:8081/api/insertCart',
          method: 'post',
          params: {
            token: window.localStorage.getItem( "userToken" ),
            productId: this.productId,
            userName: window.localStorage.getItem( "userName" ),
            specId: this.specId
          }
        } ).then( res => {
          if ( res.data.success === false ) {        // 没有卡片；卡片过期；卡片伪造时
            window.localStorage.removeItem( "userToken" )     // 删除卡片，跳转到登录页面
            this.$router.push( { path: '/login' } )
          } else {
            this.$message.success( res.data.message )
          }
        } )
      }
    },
    // 查找规格Id
    selectSpec( specId ) {
      this.specId = specId
      console.log( this.specId )
    },
    // 添加收藏
    addCollect() {
      axios( {
        url: 'http://127.0.0.1:8081/api/insertCollect',
        method: 'post',
        params: {
          token: window.localStorage.getItem( "userToken" ),
          productId: this.productId,
          userName: window.localStorage.getItem( "userName" ),
        }
      } ).then( res => {
        if ( res.data.success === false ) {        // 没有卡片；卡片过期；卡片伪造时
          window.localStorage.removeItem( "userToken" )     // 删除卡片，跳转到登录页面
          this.$router.push( { path: '/login' } )
        } else {
          this.$message.success( res.data.message )
          location.reload()
        }
      } )
    }
  },
}

</script>

<style scoped >
/* .num {
  width: 92px;
  height: 30px;
  font-size: 20px;
  border: 1px solid #bbb;
  text-align: center;
  margin-top: 20px;
}

.add {
  width: 30px;
  height: 30px;
  border: 1px solid #bbb;
  border-top: none;
  border-bottom: none;
  border-left: none;
}

.cut {
  width: 30px;
  height: 30px;
  border: 1px solid #bbb;
  border-top: none;
  border-bottom: none;
  border-right: none;
}

.num span {
  display: inline-block;
  width: 30px;
} */
</style>